<template>
  <div class="padding-t-20">
    <q-table
      class="users-table scroll my-sticky-virt scroll-table myTable inherit"
      style="margin: 0"
      :style="{ maxHeight }"
      :columns="tableColumns"
      :data="tableData"
      row-key="id"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      color="primary"
      :hide-bottom="tableData.length > 0"
      :loading="isTableLoading"
    >
      <template v-slot:body-cell-orderNo="props">
        <q-td>
          <q-btn flat color="primary" :label="props.row.orderNo" @click="toOrderList(props.row.orderNo)" />
        </q-td>
      </template>
      <template v-slot:body-cell-maintenanceStatus="props">
        <q-td>
          <set-color :options="maintenanceStatusOptions" :colorType="props.row.maintenanceStatus"/>
        </q-td>
      </template>
    </q-table>
    <!--  分页-->
    <yz-pagination v-model="pagination" @onSearch="getList"/>
  </div>
</template>

<script>
import { getMaintenaceOrders } from 'src/boot/tpm/equipment-record'
import moment from 'moment'

export default {
  name: 'maintain-order',
  components: {
  },
  props: {
    data: Object,
    maxHeight: {
      type: String,
      default: '400px'
    }
  },
  data () {
    return {
      isTableLoading: false,
      // 表格分页配置
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      id: null,
      // 表格列
      tableColumns: [
        { name: 'orderNo', label: '保养单号', align: 'left', field: 'orderNo' },
        { name: 'assetNumber', label: '设备编号', align: 'left', field: 'assetNumber' },
        { name: 'deviceName', label: '设备名称', align: 'left', field: 'deviceName' },
        { name: 'deviceTypeName', label: '设备类型', align: 'left', field: 'deviceTypeName' },
        { name: 'maintenanceType', label: '保养类型', align: 'left', field: 'maintenanceType' },
        { name: 'maintenanceStatus', label: '保养状态', align: 'left', field: 'maintenanceStatus' },
        { name: 'operator', label: '保养人', align: 'left', field: 'operator' },
        { name: 'assignedDate', label: '派单时间', align: 'left', field: 'assignedDate' }
      ],
      tableData: []
    }
  },
  computed: {
    //  保养状态枚举
    maintenanceStatusOptions () {
      return this.$getEnum(this.Enums.MAINTENANCE_STATUS)
    }
  },
  watch: {
    data: {
      handler (val) {
        if (val.id !== this.id) {
          this.id = val.id
          this.pagination.page = 1
          this.pagination.pageSize = 15
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
  },
  methods: {
    // 跳转列表
    toOrderList (order) {
      this.$router.push({
        name: 'maintenanceOrder',
        params: {
          orderNo: order
        }
      })
    },
    getList () {
      let params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.pageSize,
        deviceId: this.id
      }
      this.isTableLoading = true
      getMaintenaceOrders(params).then(res => {
        res.list.forEach(item => {
          item.nextMADate = moment(item.nextMADate).format('YYYY-MM-DD')
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          item.recurRuleFreq = this.$getEnum(this.Enums.MAINTENANCE_CYCLE, this.recurRuleFreq)?.desc
          item.maintenanceType = this.$getEnum(this.Enums.MAINTENANCE_TYPE, this.maintenanceType)?.desc
        })
        this.tableData = res.list
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
